<template>
    <div class="center">
        <div class="center-form">
          <el-form inline label-width="120px" @submit.native.prevent>
            <el-form-item label="用户号">
              <el-input  v-model="listParsem.name" placeholder="请输入用户号" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="用户名称">
              <el-input v-model="listParsem.template_id" placeholder="请输入用户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="用户类型">
                <el-select v-model="listParsem.productStatus" clearable placeholder="请选择用户类型">
                  <el-option label="全部" value="" />
                  <el-option label="企业" value="01" />
                  <el-option label="个人" value="02" />
               </el-select>
            </el-form-item>
            <el-form-item label="用户状态">
                <el-select v-model="listParsem.productStatus" clearable placeholder="请选择用户类型">
                  <el-option label="全部" value="" />
                  <el-option label="正常" value="01" />
                  <el-option label="出金冻结" value="02" />
                  <el-option label="关闭" value="02" />
                  <el-option label="入金冻结" value="02" />
               </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                  @change="actualDeduetionTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="listParsem.actualDeductionTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-construct">
            <el-button type="primary" style="margin-right: 30px;" @click="addUserRotuer">新增账户</el-button>
        </div>
        <div class="center-table">
            <el-table
          :data="appTableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
            <el-table-column align="center"  label="序号" type="index" width="55"></el-table-column>
            <el-table-column prop="templateVersion" label="用户名称" width="200" align="center" />
            <el-table-column prop="templateVersion" label="用户ID" width="200" align="center" />
            <el-table-column prop="templateVersion" label="备注" width="200" align="center" />
            <el-table-column prop="templateVersion" label="创建时间" width="200" align="center" />
            <el-table-column prop="templateVersion" label="状态" width="150" align="center" />
            <el-table-column prop="templateVersion" label="类型" width="150" align="center" />
            <el-table-column prop="templateVersion" label="联系人" width="170" align="center" />
            <el-table-column prop="templateVersion" label="手机号" width="180" align="center" />
            <el-table-column fixed="right" align="center" label="操作" width="140" >
            <template slot-scope="scope">
                <el-button type="text">修改</el-button>
                <el-button type="text">详情</el-button>
                <el-button type="text">账户信息</el-button>
            </template>
          </el-table-column>
        </el-table>
            <div class="pagination">
             <el-pagination
             background
             @current-change="handleCurrentChange"
             @size-change="sizechange"
             :page-size="listParsem.size"
             :current-page.sync="listParsem.page"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total"
            ></el-pagination>
          </div>
        </div>
    </div>
</template>
<script>
import {  basicdataQuery } from '@/api/fetchApi'
// import { arealist ,  } from '@/api/api'
export default{
    data(){
        return{
            listParsem:{page:1,
                        size:10,
                        merchantId:'',
                        data:{
                          legal_cert_no:'232330198404200611',
                          req_date:'',
                          req_seq_id:''
                        }
                       },
            total:0,
            loading:false,
           
        }
    },
    mounted(){
      this.initMerchantInfo()
    },
    methods:{
        async initList(){
          this.listParsem.data = JSON.stringify(this.listParsem.data)
           const res = await basicdataQuery(this.listParsem)
        },
        initMerchantInfo(){
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.listParsem.merchantId = userInfo.mid
        this.initApiData()
      },
      initApiData(){
        const now = new Date();
	      const year = now.getFullYear();
	      const month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() 
	      const day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
        this.listParsem.data.req_seq_id  = now.getTime()
        this.listParsem.data.req_date  = year + '' + month + '' + day
        this.initList()
      },
        addUserRotuer(){
            this.$router.push("/addMerchant");
        },
        resetList(){

        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}

</script>
<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    overflow-y: auto;
}
.center-form{
  padding: 0 22px;
}
.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}
::v-deep .el-upload--text{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.video{
  width: 160px;
    height: 160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}
.avatar{
  width: 160px;
  height: 160px;
}
</style>